<!doctype html>
<html lang="en">
  <head>
    <title>Vis Network | Events | Interaction events</title>

    <script
      type="text/javascript"
      src="../../../standalone/umd/vis-network.min.js"
    ></script>

    <style type="text/css">
      #mynetwork {
        width: 600px;
        height: 400px;
        border: 1px solid lightgray;
      }
    </style>
  </head>
  <body>
    <p>
      Create a simple network with some nodes and edges. Some of the events are
      logged in the console in improve readability.
    </p>

    <div id="mynetwork"></div>

    <h2 id="eventSpanHeading"></h2>
    <pre id="eventSpanContent"></pre>

    <script type="text/javascript">
      // create an array with nodes
      var nodes = new vis.DataSet([
        { id: 1, label: "Node 1", title: "I have a popup!" },
        { id: 2, label: "Node 2", title: "I have a popup!" },
        { id: 3, label: "Node 3", title: "I have a popup!" },
        { id: 4, label: "Node 4", title: "I have a popup!" },
        { id: 5, label: "Node 5", title: "I have a popup!" },
      ]);

      // create an array with edges
      var edges = new vis.DataSet([
        { from: 1, to: 3 },
        { from: 1, to: 2 },
        { from: 2, to: 4 },
        { from: 2, to: 5 },
      ]);

      // create a network
      var container = document.getElementById("mynetwork");
      var data = {
        nodes: nodes,
        edges: edges,
      };

      var options = {
        interaction: { hover: true },
        manipulation: {
          enabled: true,
        },
      };

      var network = new vis.Network(container, data, options);

      network.on("click", function (params) {
        params.event = "[original event]";
        document.getElementById("eventSpanHeading").innerText = "Click event:";
        document.getElementById("eventSpanContent").innerText = JSON.stringify(
          params,
          null,
          4,
        );
        console.log(
          "click event, getNodeAt returns: " +
            this.getNodeAt(params.pointer.DOM),
        );
      });
      network.on("doubleClick", function (params) {
        params.event = "[original event]";
        document.getElementById("eventSpanHeading").innerText =
          "doubleClick event:";
        document.getElementById("eventSpanContent").innerText = JSON.stringify(
          params,
          null,
          4,
        );
      });
      network.on("oncontext", function (params) {
        params.event = "[original event]";
        document.getElementById("eventSpanHeading").innerText =
          "oncontext (right click) event:";
        document.getElementById("eventSpanContent").innerText = JSON.stringify(
          params,
          null,
          4,
        );
      });
      network.on("dragStart", function (params) {
        // There's no point in displaying this event on screen, it gets immediately overwritten
        params.event = "[original event]";
        console.log("dragStart Event:", params);
        console.log(
          "dragStart event, getNodeAt returns: " +
            this.getNodeAt(params.pointer.DOM),
        );
      });
      network.on("dragging", function (params) {
        params.event = "[original event]";
        document.getElementById("eventSpanHeading").innerText =
          "dragging event:";
        document.getElementById("eventSpanContent").innerText = JSON.stringify(
          params,
          null,
          4,
        );
      });
      network.on("dragEnd", function (params) {
        params.event = "[original event]";
        document.getElementById("eventSpanHeading").innerText =
          "dragEnd event:";
        document.getElementById("eventSpanContent").innerText = JSON.stringify(
          params,
          null,
          4,
        );
        console.log("dragEnd Event:", params);
        console.log(
          "dragEnd event, getNodeAt returns: " +
            this.getNodeAt(params.pointer.DOM),
        );
      });
      network.on("controlNodeDragging", function (params) {
        params.event = "[original event]";
        document.getElementById("eventSpanHeading").innerText =
          "control node dragging event:";
        document.getElementById("eventSpanContent").innerText = JSON.stringify(
          params,
          null,
          4,
        );
      });
      network.on("controlNodeDragEnd", function (params) {
        params.event = "[original event]";
        document.getElementById("eventSpanHeading").innerText =
          "control node drag end event:";
        document.getElementById("eventSpanContent").innerText = JSON.stringify(
          params,
          null,
          4,
        );
        console.log("controlNodeDragEnd Event:", params);
      });
      network.on("zoom", function (params) {
        document.getElementById("eventSpanHeading").innerText = "zoom event:";
        document.getElementById("eventSpanContent").innerText = JSON.stringify(
          params,
          null,
          4,
        );
      });
      network.on("showPopup", function (params) {
        document.getElementById("eventSpanHeading").innerText =
          "showPopup event: ";
        document.getElementById("eventSpanContent").innerText = JSON.stringify(
          params,
          null,
          4,
        );
      });
      network.on("hidePopup", function () {
        console.log("hidePopup Event");
      });
      network.on("select", function (params) {
        console.log("select Event:", params);
      });
      network.on("selectNode", function (params) {
        console.log("selectNode Event:", params);
      });
      network.on("selectEdge", function (params) {
        console.log("selectEdge Event:", params);
      });
      network.on("deselectNode", function (params) {
        console.log("deselectNode Event:", params);
      });
      network.on("deselectEdge", function (params) {
        console.log("deselectEdge Event:", params);
      });
      network.on("hoverNode", function (params) {
        console.log("hoverNode Event:", params);
      });
      network.on("hoverEdge", function (params) {
        console.log("hoverEdge Event:", params);
      });
      network.on("blurNode", function (params) {
        console.log("blurNode Event:", params);
      });
      network.on("blurEdge", function (params) {
        console.log("blurEdge Event:", params);
      });
    </script>
  </body>
</html>
